<template>
    <div id="app1">
      <img src="../../../../../public/600.png" alt="Banner Image" class="banner-image" />
      <Header/>
  <div class="grid-container">
    <div class="grid-item" v-for="(item, index) in items" :key="index">
      <div class="item-content">
        <div class="item-image">
          <img :src="item.image" alt="book cover" class="cover-image" />
          <p class="title">{{ item.title }}</p>
        </div>
        <div class="item-description">
          <p>{{ item.description }}</p>
          <router-link :to="item.url" target="_blank">查看全文</router-link>
        </div>
      </div>
    </div>
  </div>
  <Footer />
  </div>
</template>

<script>

import Header from '@/modules/module6/module6-zongshu/components/Header.vue';
import Footer from '@/modules/module6/module6-zongshu/components/Footer.vue';
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      items: [
        {
          image: '../../../../public/650.png', // 请替换为实际的图片URL
          title: '《当代中国史研究》',
          description:
            '《当代中国史研究》(陈云题写刊名)是中国社会科学院主管、当代中国研究所主办的关于中华人民共和国史的唯一专业学术期刊，1994年1月创刊，国内外公开发行。',
          url: '/book1' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/651.jpg', // 请替换为实际的图片URL
          title: '《党的文献》',
          description:
            '《党的文献》是由中共中央文献研究室和中央档案馆共同主办的中央级学术理论刊物。邓小平题写封面刊名。被评为全国一级中文社会科学核心期刊、中央级全国百种重点社科期刊，连续三届获得国家期刊奖提名奖。',
          url: '/book2' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/652.jpg', // 请替换为实际的图片URL
          title: '《中共党史研究》',
          description:
            '《中共党史研究》是中共中央党史研究室主办的全国性党史学术期刊,其前身为1981年创办的《党史资料通讯》,1988年《党史通讯》与中共中央党校主办的《党史研究》(创办于1980年)合刊，改为现名。',
          url: '/book3' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/653.jpg', // 请替换为实际的图片URL
          title: '《中共党史资料》',
          description:
            '《中共党史资料》记录了中共从创始以来的一些会议记录及相关资料。着重介绍中共历史，内容详实、记录完整，是各个档案机构收集记录中共历史的重要文献。从中我党几代领导人的个人人格魅力。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_19/200907/t20090708_3953377.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/654.jpg', // 请替换为实际的图片URL
          title: '《中国经济史研究》',
          description:
            '《中国经济史研究》由中国社科院经济研究所主办、经济研究杂志社出版的专业性刊物，创刊于1986年，季刊。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_18/200907/t20090708_3953376.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/655.jpg', // 请替换为实际的图片URL
          title: '《百年潮》',
          description:
            '《百年潮》杂志是由中共中央党史研究室主管、中国中共党史学会主办的大型时政、文史月刊。《百年潮》是反映20世纪中国政治、经济、军事、文化、外交等领域中重大事件、重要人物的最具权威性的杂志之一。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_17/200907/t20090708_3953375.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/656.jpg', // 请替换为实际的图片URL
          title: '《纵横》',
          description:
            '《纵横》杂志是全国第一份集中发表回忆录的期刊，也是全国政协惟一一份综合性文史期刊，在社会上具有广泛的影响和很高的声誉。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_16/200907/t20090708_3953374.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/657.jpg', // 请替换为实际的图片URL
          title: '《史学月刊》',
          description:
            '《史学月刊》河南大学建制，由河南省历史学会和河南大学共同主办，刊物归河南大学主管。该刊为全国中文核心期刊，荣获“第三届中国期刊奖·百强期刊”。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_15/200907/t20090708_3953373.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/658.jpg', // 请替换为实际的图片URL
          title: '《军事历史》',
          description:
            '《军事历史》由中国人民解放军军事科学院军事历史研究部主办的研究中外军事历史的综合性刊物。1981年创刊。《军事历史》的栏目有“国防与军队建设史研究”、“战争史研究”、“军事思想史研究”、“军事人物春秋”等。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_14/200907/t20090708_3953372.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/659.jpg', // 请替换为实际的图片URL
          title: '《军事历史研究》',
          description:
            '《军事历史研究》为季刊，1986年创刊。军史史学术研究刊物。读者对象为军史研究人员、军队指战员和军事院校师生。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_13/200907/t20090708_3953371.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/660.jpg', // 请替换为实际的图片URL
          title: '《史林》',
          description:
            '本刊以刊登中国古代史、中国近现代史、社会史、世界史及上海学研究等最新研究成果为主，并开设城市史、口述史、海外史学名著评介、书评、读史札记等专栏。立意新颖，资料翔实，信息量大，已成为史学界有重要影响的学术刊物。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_11/200907/t20090708_3953370.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/661.jpg', // 请替换为实际的图片URL
          title: '《中国地方志》',
          description:
            '《本刊是由中国社会科学院主管、中国地方志指导小组主办的国内外公开发行的学术性刊物，全国史学类核心刊物之一。 ',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_10/200907/t20090708_3953369.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/662.jpg', // 请替换为实际的图片URL
          title: '《党的研究与教学》',
          description:
            '由中共福建省委党校与福建省中共党史学会主办，中国现代史学会、中共中央党校党史教研部联办的党史专业理论杂志,全国中文核心期刊。该刊创办于1979年，双月刊。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_4/200912/t20091204_3964943.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/663.jpg', // 请替换为实际的图片URL
          title: '《党史文汇》',
          description:
            '由山西省史志研究院主办的大众化党史宣传月刊，1990年创刊。《党史文汇》为山西省一级期刊，曾获得全国首届党史报刊优秀发行奖。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_3/200912/t20091204_3964945.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/664.jpg', // 请替换为实际的图片URL
          title: '《党史纵览》',
          description:
            '由中共安徽省委党史研究室主管，融史料性、知识性、教育性、可读性为一体的面向大众的综合性党史宣传刊物，国内外公开发行。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_2/200912/t20091204_3964947.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/665.jpg', // 请替换为实际的图片URL
          title: '《毛泽东思想研究》',
          description:
            '《毛泽东思想研究》杂志系全国第一家也是目前唯一一家公开出版的研究和宣传毛泽东思想的大型学术理论刊物。1983年创刊，原为季刊，从1997年第1期起改为双月刊。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/dangdaizh_1/200912/t20091204_3964949.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/666.jpg', // 请替换为实际的图片URL
          title: '《教学与研究》',
          description:
            '《教学与研究》是教育部委托中国人民大学主办的理论刊物。办刊宗旨是为高校马克思主义理论教学与研究服务，同时发表相关的人文社会科学研究成果。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/jxyyj/201812/t20181214_4793573.html' // 请替换为实际的全文链接
        },
        {
          image: '../../../../public/667.jpg', // 请替换为实际的图片URL
          title: '《上海党史与党建》',
          description:
            '《上海党史与党建》（月刊）创刊于1982年，由上海党史报刊社主办。主要对象是党史、党建专家、工作者、干部。',
          url: 'http://hprc.cssn.cn/wxzl/gsqk/shdsydj/201812/t20181214_4793574.html' // 请替换为实际的全文链接
        }
      ]
    }
  }
}
</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  margin-bottom: 42px;
  background-color: white;
}

.grid-item {
  display: flex;
  background-color: rgb(199, 225, 199);
  align-items: flex-start; /* 确保内容从顶部开始 */
}

.item-content {
  display: flex;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  align-items: center; /* 添加此行以垂直居中 */
}

.item-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px; /* 根据需要调整间距 */
}

.item-description {
  flex: 1; /* 让描述部分占据剩余空间 */
  display: flex;
  flex-direction: column; /* 确保描述文本垂直排列 */
  justify-content: center; /* 垂直居中描述文本 */
}
.cover-image {
  width: 150px;
  height: auto;
}

.title {
  margin-top: 10px;
  font-size: 16px;
}

.description {
  margin-top: 5px;
  font-size: 14px;
}

a {
  margin-top: 5px;
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>
